import React, { Component } from 'react';
 
 const {UE} = window;
class Ueditor extends Component{
  constructor(props){
    super(props);
    this.state = {};
  }
  componentDidMount(){
    this.initEditor()
  }
  componentWillUnmount() {
    // 组件卸载后，清除放入库的id
    UE.delEditor(this.props.id);
  }
  initEditor() {
    const id = this.props.id;
    const ueEditor = UE.getEditor(this.props.id, {
             //工具栏
                toolbars: [this.props.toolbars]
                ,lang:"zh-cn"
                //字体
                ,'fontfamily':[
                   { label:'',name:'songti',val:'宋体,SimSun'},
                   { label:'',name:'kaiti',val:'楷体,楷体_GB2312, SimKai'},
                   { label:'',name:'yahei',val:'微软雅黑,Microsoft YaHei'},
                   { label:'',name:'heiti',val:'黑体, SimHei'},
                   { label:'',name:'lishu',val:'隶书, SimLi'},
                   { label:'',name:'andaleMono',val:'andale mono'},
                   { label:'',name:'arial',val:'arial, helvetica,sans-serif'},
                   { label:'',name:'arialBlack',val:'arial black,avant garde'},
                   { label:'',name:'comicSansMs',val:'comic sans ms'},
                   { label:'',name:'impact',val:'impact,chicago'},
                   { label:'',name:'timesNewRoman',val:'times new roman'}
                ]
                //字号
                ,'fontsize':[10, 11, 12, 14, 16, 18, 20, 24, 36]
                , enableAutoSave : false
                , saveInterval: 10000
                , autoHeightEnabled : false
                , elementPathEnabled: false
                , initialFrameHeight: this.props.height
                , initialFrameWidth: '100%'
                , readonly: this.props.disabled
        });
    const self = this;
    ueEditor.ready((ueditor) => {
      if (!ueditor) {
        UE.delEditor(id);
        self.initEditor();
      }
      if (this.props.value) {
        ueEditor.setContent(this.props.value);
      }
    })
    global.ue = ueEditor;
  }

  render(){
    return (
      <div id={this.props.id} name="content" type="text/plain"></div>
    );
  }

}

export default Ueditor;
